<template>
	<view v-if="pageShow">
		<u-swiper :list="dataAll.images_arr" indicator indicatorMode="line" height="300" radius="0" circular></u-swiper>
		<view class="mainpadding2" style="padding-bottom: 150rpx;">
			<view class="ffffff radius mainpadding_top">
				<view class="main_size hei_text bold">{{dataAll.name}}</view>
				<view class="titletext hong_text bold margin_top">￥{{dataAll.price}}</view>
				<view class="flexbetween margin_top">
					<view class="xiaohui">销量：{{dataAll.sale_num || 0}}</view>
					<view class="xiaohui">库存：{{dataAll.stock_num || 0}}</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="hei_text main_size bold flexcenter">详情</view>
				<u-parse :content="dataAll.content"></u-parse>
			</view>
		</view>
		<view class="posibottom mainpadding">
			<view class="submitbtn" @click="skushow=true">立即购买</view>
		</view>
		<u-popup :show="skushow" @close="skushow=false" round="10">
			<view class="mainpadding_top">
				<view class="flexleft">
					<image :src="slt_item" class="listleftimg2 radius" mode=""></image>
					<view class="flexcolumnbet margin_left2" style="height: 110rpx; width: 100%;">
						<view class="hong_text titletext margin_top1 bold">￥{{jg_item}}</view>
						<view class="flexbetween" style="width: 100%;">
							<view class="xiaohui">销量：{{xl_item || 0}}</view>
							<view class="xiaohui">库存：{{kc_item || 0}}</view>
						</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in dataAll.spu" :key="index">
					<view class="hei_text main_size bold margin_top">{{item.spu}}</view>
					<view class="flexleft flex_wrap">
						<view class="lable margin_top margin_right" v-for="(ite,inde) in item.spuitem_for" :key="inde" :class="ite.is_check?'itemgl':''" @click="checkspu(item,ite)">{{ite.name}}</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="hei_text main_size bold ">购买数量</view>
					<view class="flexbetween bghui radius" style="padding: 10rpx;">
						<view class="reduceimg" @click="reduceFn"></view>
						<input type="number" class="hei_text main_size bold" style="width: 100rpx; text-align: center;"
							v-model="num"/>
						<view class="addimg" @click="addFn"></view>
					</view>
				</view>
			</view>
			<view class="mainpadding">
				<view class="submitbtn" @click="buy">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				skushow: false,
				num: 1,
				pageShow: false,
				dataAll: {},
				comments: [], //评论
				xl_item:0,
				slt_item:"",
				jg_item:0,
				kc_item:0,
				unique:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		watch:{
			dataAll:{
				handler(newval){
					let arr = []//选中的规格
					newval.spu.forEach(item=>{
						item.spuitem_for.forEach(ite=>{
							if(ite.is_check){
								arr.push(ite.name)
							}
						})
					})
					newval.sku.forEach(item=>{
						if(item.sku==arr.join()){
							this.xl_item = item.sales_num
							if(this.dataAll.spu.length){
								this.slt_item = item.image_text
							}
							this.jg_item = item.price
							this.kc_item = item.stock_num
							this.unique = item.unique
						}
					})
				},
				deep:true
			}
		},
		methods: {
			getDetail() {
				httpRequest.request('/api/goods/detail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.info.spu.forEach(item=>{
							let arr = []
							item.spuitem_arr.forEach((ite,index)=>{
								arr.push({
									name:ite,
									is_check:false
								})
							})
							this.$set(item,"spuitem_for",arr)
						})
						this.dataAll = res.data.info
						this.slt_item = res.data.info.image_text
						this.jg_item = res.data.info.price
						this.xl_item = res.data.info.sales_num
						this.comments = res.data.info
						this.pageShow = true
						this.kc_item = res.data.info.stock_num
					
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			checkspu(data1,data){
				data1.spuitem_for.forEach(item=>{
					if(item==data){
						item.is_check = true
					}else{
						item.is_check = false
					}
				})
			},
			reduceFn() {
				if (this.num == 1) {
					return
				}
				this.num = Number(this.num) - 1
			},
			addFn() {
				this.num = Number(this.num) + 1
			},
			buy() {
				if(this.unique==""){
					httpRequest.toast("请选择规格")
					return false
				}
				if(this.kc_item<this.num){
					httpRequest.toast("库存不足")
					return false
				}
				this.skushow = false
				let data = {
					goods_num:this.num,
					goods_id:this.listid,
					goods_sku_unique:this.unique
				}
				uni.navigateTo({
					url: "/pages_mall/querendd?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
		}
	}
</script>

<style scoped>
	.lable {
		width: auto;
		padding: 10rpx 30rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50rpx;
		background-color: #f5f5f5;
		color: #666666;
		border: 1rpx solid #f5f5f5;
	}

	.itemgl {
		background-color: #ebf2fd !important;
		color: #3478F5 !important;
		border: 1rpx solid #3478F5 !important;
	}
</style>